<script setup lang="ts">
import { ref,onMounted,onUpdated } from 'vue'
import { Canvas } from './modules/canvas.js';

import { Square } from './modules/square.js';
import { Circle } from './modules/circle.js';
import { Triangle } from './modules/triangle.js';

let isShow = ref(false);

let showView=()=>{
// create the canvas and reporting list
let myCanvas = new Canvas('myCanvas', document.querySelector("#classes-root"), 480, 320);
myCanvas.create();
myCanvas.createReportList();

// draw a square
let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
square1.draw();
square1.reportArea();
square1.reportPerimeter();

// draw a circle
let circle1 = new Circle(myCanvas.ctx, myCanvas.listId, 75, 200, 100, 'green');
circle1.draw();
circle1.reportArea();
circle1.reportPerimeter();

// draw a triangle
let triangle1 = new Triangle(myCanvas.ctx, myCanvas.listId, 100, 75, 190, 'yellow');
triangle1.draw();
triangle1.reportArea();
triangle1.reportPerimeter();
}

onMounted(()=>{
    if(isShow.value==true){
        showView();
    }
})

onUpdated(()=>{
    if(isShow.value==true){
        showView();
    }
})
</script>

<template>
    <div class="hide"><input type="button" :value="`${isShow ? 'hide' : 'show'} Classes`" @click="isShow = !isShow"></div>
    <div v-if="isShow">
        <div>JavaScript module class example</div>
        <div id="classes-root"></div>
    </div>
</template>

<style scoped>
canvas {
        border: 1px solid black;
      }
</style>